<md-list class="date">
    <md-subheader class="md-no-sticky"><span translate="QUICKPANEL.TODAY">Today</span></md-subheader>
    <md-list-item class="md-display-1 md-2-line" layout="column" layout-align="start start">
        <div class="secondary-text">
            <div> {{vm.date | date:'EEEE'}}</div>
            <div layout="row" layout-align="start start">
                <span> {{vm.date | date:'d'}}</span>
                <span class="md-subhead">th</span>
                <span> {{vm.date | date:'MMMM'}}</span>
            </div>
        </div>
    </md-list-item>
</md-list>

<md-divider></md-divider>

<md-list>
    <md-subheader class="md-no-sticky"><span translate="QUICKPANEL.EVENTS">Events</span></md-subheader>

    <md-list-item class="md-2-line" ng-repeat="event in vm.events" ng-click="dummyFunction()">
        <div class="md-list-item-text">
            <h3>{{event.title}}</h3>

            <p>{{event.detail}}</p>
        </div>
    </md-list-item>
</md-list>

<md-divider></md-divider>

<md-list>
    <md-subheader class="md-no-sticky"><span translate="QUICKPANEL.NOTES">Notes</span></md-subheader>
    <md-list-item class="md-2-line" ng-repeat="note in vm.notes" ng-click="dummyFunction()">
        <div class="md-list-item-text">
            <h3>{{note.title}}</h3>

            <p>{{note.detail}}</p>
        </div>
    </md-list-item>
</md-list>

<md-divider></md-divider>

<md-list>
    <md-subheader class="md-no-sticky"><span translate="QUICKPANEL.QUICK_SETTINGS">Quick Settings</span></md-subheader>

    <md-list-item>
        <h3 translate="QUICKPANEL.NOTIFICATIONS">Notifications</h3>
        <md-switch class="md-secondary" ng-model="vm.settings.notify" aria-label="Notifications" translate
                   translate-attr-aria-label="QUICKPANEL.NOTIFICATIONS"></md-switch>
    </md-list-item>

    <md-list-item>
        <h3 translate="QUICKPANEL.CLOUD_SYNC">Cloud Sync</h3>
        <md-switch class="md-secondary" ng-model="vm.settings.cloud" aria-label="Cloud Sync" translate
                   translate-attr-aria-label="QUICKPANEL.CLOUD_SYNC"></md-switch>
    </md-list-item>

    <md-list-item>
        <h3 translate="QUICKPANEL.RETRO_THRUSTERS">Retro Thrusters</h3>
        <md-switch class="md-secondary md-warn" ng-model="vm.settings.retro" aria-label="Retro Thrusters" translate
                   translate-attr-aria-label="QUICKPANEL.RETRO_THRUSTERS"></md-switch>
    </md-list-item>
</md-list>
